<template>
  <div class="like">
    <van-nav-bar
      title="我的收藏"
      left-text="返回"
      left-arrow
      @click-left="back"
    />
    <div class="bg"></div>
    <div class="like-list">
      <ul v-if="likeList.length > 0">
        <li
          v-for="(item, i) in likeList"
          :key="item.id"
          @click="goLikePro(item.pid)"
        >
          <div class="like-img">
            <img class="img-auto" :src="item.smallImg" alt="" />
          </div>
          <div class="like-names">
            <div class="like-name">{{ item.name }}</div>
            <div class="like-enname">{{ item.enname }}</div>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div class="like-price">&yen; {{ item.price }}</div>
            <van-icon
              name="delete-o"
              size="17"
              style="margin-right: 10px"
              @click.stop="removeLike(item.pid, i)"
            />
          </div>
        </li>
      </ul>
      <!-- 空状态 -->
      <van-empty v-else description="已经没有商品了">
      <van-button round type="default" class="bottom-button" @click="shopping"
        >逛一逛</van-button
      >
    </van-empty>
    </div>
  </div>
</template>

<script>
import "../assets/less/like.less";
export default {
  name: "Like",
  data() {
    return {
      likeList: [],
    };
  },

  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getLike();
    });
  },

  methods: {
    back() {
      this.$router.back();
    },

    goLikePro(pid) {
      this.$router.push({ name: "Details", params: { pid } });
    },

    shopping() {
      this.$router.push({path: '/'});
    },

    // 查询收藏商品
    getLike() {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        return this.$router.push({ name: "Login" });
      }

      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });

      this.axios({
        method: "GET",
        url: this.baseURL + "/findAllLike",
        params: {
          appkey: this.appkey,
          tokenString,
        },
      })
        .then((response) => {
          this.$toast.clear();
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code == 2000) {
            this.likeList = response.data.result;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.error(err);
        });
    },

    // 删除收藏商品
    removeLike(pid,index) {
      let tokenString = this.$cookies.get("tokenString");

      if (!tokenString) {
        console.log("浏览器token不存在");
        return this.$router.push({ name: "Login" });
      }

      this.axios({
        method: "post",
        url: this.baseURL + "/notlike",
        data: {
          appkey: this.appkey,
          pid,
          tokenString,
        },
      })
        .then((response) => {
          // console.log(response);

          if (response.data.code === 700) {
            this.$toast({
              message: response.data.msg,
              forbidClick: true,
              duration: 1000,
            });
            this.$router.push({ name: "Login" });
          }

          if (response.data.code === 900) {
            if (response.data.result === 1) {
              this.likeList.splice(index, 1);
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
